<template>
  <div class="min-h-screen p-6" style="background-color: #FAF9F5;">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">个人中心</h1>
          <p class="mt-1 text-sm text-gray-600">查看和管理您的个人信息</p>
        </div>
        <div class="flex items-center gap-3">
          <button
            @click="refreshData"
            class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <ArrowPathIcon class="w-4 h-4 mr-2" />
            刷新
          </button>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 个人信息卡片 -->
      <div class="lg:col-span-2">
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-medium text-gray-900">基本信息</h2>
            <button
              @click="showEditModal = true"
              class="text-blue-600 hover:text-blue-900 text-sm font-medium transition-colors"
            >
              编辑信息
            </button>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                <p class="text-sm text-gray-900">{{ userInfo.name }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                <p class="text-sm text-gray-900">{{ userInfo.studentId }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                <p class="text-sm text-gray-900">{{ userInfo.gender }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
                <p class="text-sm text-gray-900">{{ userInfo.birthDate }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
                <p class="text-sm text-gray-900">{{ maskIdCard(userInfo.idCard) }}</p>
              </div>
            </div>
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">专业</label>
                <p class="text-sm text-gray-900">{{ userInfo.major }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">班级</label>
                <p class="text-sm text-gray-900">{{ userInfo.class }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                <p class="text-sm text-gray-900">{{ userInfo.phone }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                <p class="text-sm text-gray-900">{{ userInfo.email }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">入学年份</label>
                <p class="text-sm text-gray-900">{{ userInfo.enrollmentYear }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 紧急联系人信息卡片 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6 mt-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-medium text-gray-900">紧急联系人</h2>
            <button
              @click="showContactModal = true"
              class="text-blue-600 hover:text-blue-900 text-sm font-medium transition-colors"
            >
              编辑联系人
            </button>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                <p class="text-sm text-gray-900">{{ emergencyContact.name }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">关系</label>
                <p class="text-sm text-gray-900">{{ emergencyContact.relationship }}</p>
              </div>
            </div>
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
                <p class="text-sm text-gray-900">{{ emergencyContact.phone }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">工作单位</label>
                <p class="text-sm text-gray-900">{{ emergencyContact.workplace }}</p>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- 侧边栏 -->
      <div class="space-y-6">
        <!-- 头像和基本信息 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <div class="text-center">
            <div class="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 overflow-hidden">
              <img v-if="userInfo.avatar" :src="userInfo.avatar" :alt="userInfo.name" class="w-full h-full object-cover" />
              <div v-else class="w-full h-full flex items-center justify-center">
                <UserIcon class="w-12 h-12 text-gray-400" />
              </div>
            </div>
            <h3 class="text-lg font-medium text-gray-900">{{ userInfo.name }}</h3>
            <p class="text-sm text-gray-500">{{ userInfo.studentId }}</p>
            <p class="text-sm text-gray-500">{{ userInfo.major }}</p>
            <button
              @click="showAvatarModal = true"
              class="mt-3 text-sm text-blue-600 hover:text-blue-900 transition-colors"
            >
              更换头像
            </button>
          </div>
        </div>

        <!-- 账号安全 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h3 class="text-lg font-medium text-gray-900 mb-4">账号安全</h3>
          <div class="space-y-3">
            <button
              @click="showPasswordModal = true"
              class="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-[0.6rem] hover:border-gray-400 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <div class="flex items-center">
                <KeyIcon class="w-5 h-5 text-gray-400 mr-3" />
                <span class="text-sm font-medium text-gray-900">修改密码</span>
              </div>
              <ChevronRightIcon class="w-4 h-4 text-gray-400" />
            </button>
            <button
              @click="logout"
              class="w-full flex items-center justify-between p-3 text-left border border-gray-200 rounded-[0.6rem] hover:border-gray-400 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <div class="flex items-center">
                <ArrowRightOnRectangleIcon class="w-5 h-5 text-gray-400 mr-3" />
                <span class="text-sm font-medium text-gray-900">退出登录</span>
              </div>
              <ChevronRightIcon class="w-4 h-4 text-gray-400" />
            </button>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h3 class="text-lg font-medium text-gray-900 mb-4">统计信息</h3>
          <div class="space-y-3">
            <div class="flex justify-between">
              <span class="text-sm text-gray-600">注册时间</span>
              <span class="text-sm text-gray-900">{{ formatDate(userInfo.registrationDate) }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-sm text-gray-600">最后登录</span>
              <span class="text-sm text-gray-900">{{ formatDate(userInfo.lastLogin) }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-sm text-gray-600">登录次数</span>
              <span class="text-sm text-gray-900">{{ userInfo.loginCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑基本信息弹窗 -->
    <div v-if="showEditModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="rounded-[0.6rem] shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto" style="background-color: #FAF9F5; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
        <div class="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">编辑基本信息</h2>
          <button
            @click="closeEditModal"
            class="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <XMarkIcon class="w-6 h-6" />
          </button>
        </div>
        <form @submit.prevent="saveUserInfo" class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">手机号码</label>
              <input
                v-model="editForm.phone"
                type="tel"
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
              <input
                v-model="editForm.email"
                type="email"
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              />
            </div>
          </div>
          <div class="flex justify-end gap-3 mt-6">
            <button
              type="button"
              @click="closeEditModal"
              class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-4 py-2 text-sm font-medium text-white border border-blue-600 rounded-[0.6rem] hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #3B82F6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div v-if="showPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="rounded-[0.6rem] shadow-xl max-w-md w-full mx-4" style="background-color: #FAF9F5; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
        <div class="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">修改密码</h2>
          <button
            @click="closePasswordModal"
            class="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <XMarkIcon class="w-6 h-6" />
          </button>
        </div>
        <form @submit.prevent="changePassword" class="p-6">
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">当前密码</label>
              <input
                v-model="passwordForm.currentPassword"
                type="password"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">新密码</label>
              <input
                v-model="passwordForm.newPassword"
                type="password"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">确认新密码</label>
              <input
                v-model="passwordForm.confirmPassword"
                type="password"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              />
            </div>
          </div>
          <div class="flex justify-end gap-3 mt-6">
            <button
              type="button"
              @click="closePasswordModal"
              class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-4 py-2 text-sm font-medium text-white border border-blue-600 rounded-[0.6rem] hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #3B82F6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              修改密码
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 编辑紧急联系人弹窗 -->
    <div v-if="showContactModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 class="text-lg font-medium text-gray-900">编辑紧急联系人</h2>
          <button
            @click="closeContactModal"
            class="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <XMarkIcon class="w-6 h-6" />
          </button>
        </div>
        <form @submit.prevent="saveEmergencyContact" class="p-6">
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
              <input
                v-model="contactForm.name"
                type="text"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">关系</label>
              <select
                v-model="contactForm.relationship"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              >
                <option value="">请选择关系</option>
                <option value="父亲">父亲</option>
                <option value="母亲">母亲</option>
                <option value="配偶">配偶</option>
                <option value="兄弟">兄弟</option>
                <option value="姐妹">姐妹</option>
                <option value="其他">其他</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">联系电话</label>
              <input
                v-model="contactForm.phone"
                type="tel"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">工作单位</label>
              <input
                v-model="contactForm.workplace"
                type="text"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              />
            </div>
          </div>
          <div class="flex justify-end gap-3 mt-6">
            <button
              type="button"
              @click="closeContactModal"
              class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/app'
import {
  ArrowPathIcon,
  UserIcon,
  KeyIcon,
  ArrowRightOnRectangleIcon,
  ChevronRightIcon,
  XMarkIcon
} from '@heroicons/vue/24/outline'

// 使用stores和router
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const userInfo = ref({
  name: '张三',
  studentId: '2024001',
  gender: '男',
  birthDate: '2005-03-15',
  idCard: '110101200503150001',
  major: '计算机科学与技术',
  class: '计科2024-1班',
  phone: '13800138000',
  email: 'zhangsan@student.edu.cn',
  enrollmentYear: '2024',
  avatar: null,
  registrationDate: '2024-01-10T00:00:00',
  lastLogin: '2024-01-15T10:30:00',
  loginCount: 25
})

const emergencyContact = ref({
  name: '张父',
  relationship: '父亲',
  phone: '13900139000',
  workplace: '某某公司'
})

const showEditModal = ref(false)
const showPasswordModal = ref(false)
const showContactModal = ref(false)
const showAvatarModal = ref(false)

const editForm = ref({
  phone: '',
  email: ''
})

const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const contactForm = ref({
  name: '',
  relationship: '',
  phone: '',
  workplace: ''
})

// 方法
const refreshData = async () => {
  try {
    // 模拟刷新数据
    appStore.showNotification('数据刷新成功', 'success')
  } catch (error) {
    appStore.showNotification('刷新失败，请重试', 'error')
  }
}

const maskIdCard = (idCard) => {
  if (!idCard) return ''
  return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

const closeEditModal = () => {
  showEditModal.value = false
  editForm.value = {
    phone: userInfo.value.phone,
    email: userInfo.value.email
  }
}

const saveUserInfo = async () => {
  try {
    // 模拟保存用户信息
    userInfo.value.phone = editForm.value.phone
    userInfo.value.email = editForm.value.email
    appStore.showNotification('个人信息更新成功', 'success')
    closeEditModal()
  } catch (error) {
    appStore.showNotification('更新失败，请重试', 'error')
  }
}

const closePasswordModal = () => {
  showPasswordModal.value = false
  passwordForm.value = {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}

const changePassword = async () => {
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    appStore.showNotification('两次输入的密码不一致', 'error')
    return
  }
  
  try {
    // 模拟修改密码
    appStore.showNotification('密码修改成功', 'success')
    closePasswordModal()
  } catch (error) {
    appStore.showNotification('密码修改失败，请重试', 'error')
  }
}

const logout = () => {
  // 清除登录状态
  localStorage.removeItem('token')
  localStorage.removeItem('userType')
  appStore.showNotification('已退出登录', 'success')
  router.push('/login')
}

const closeContactModal = () => {
  showContactModal.value = false
  contactForm.value = {
    name: emergencyContact.value.name,
    relationship: emergencyContact.value.relationship,
    phone: emergencyContact.value.phone,
    workplace: emergencyContact.value.workplace
  }
}

const saveEmergencyContact = async () => {
  try {
    // 模拟保存紧急联系人信息
    emergencyContact.value = {
      name: contactForm.value.name,
      relationship: contactForm.value.relationship,
      phone: contactForm.value.phone,
      workplace: contactForm.value.workplace
    }
    appStore.showNotification('紧急联系人信息更新成功', 'success')
    closeContactModal()
  } catch (error) {
    appStore.showNotification('更新失败，请重试', 'error')
  }
}

// 生命周期
onMounted(() => {
  editForm.value = {
    phone: userInfo.value.phone,
    email: userInfo.value.email
  }
  contactForm.value = {
    name: emergencyContact.value.name,
    relationship: emergencyContact.value.relationship,
    phone: emergencyContact.value.phone,
    workplace: emergencyContact.value.workplace
  }
})
</script>